import React from 'react';

export default class TodoFooter extends React.Component{

    render(){
        let clearButton = null;
        if (this.props.completedCount > 0) {
            clearButton = (
                <button
                    className="clear-completed"
                    onClick={this.props.onClearCompleted}>
                    Clear completed
                </button>
            );
        }

        let nowShowing = this.props.nowShowing;

        return (
            <footer className="footer">
					<span className="todo-count">
						 未完成数量 <strong>{this.props.count}</strong>
					</span>
                <ul className="filters">
                    <li>
                        <a
                            className={nowShowing === 'all'?'selected':''}><button onClick={this.props.showAll}>
                            All</button>
                        </a>
                    </li>
                    {' '}
                    <li>
                        <a
                            className={nowShowing === 'active'?'selected':''}><button onClick={this.props.showActive}>
                            Active</button>
                        </a>
                    </li>
                    {' '}
                    <li>
                        <a
                            className={nowShowing === 'completed'?'selected':''}><button onClick={this.props.showCompleted}>
                            Completed</button>
                        </a>
                    </li>
                </ul>
                {clearButton}
            </footer>
        )
    }
}